<template>
  <el-dialog v-model="dialogVisible" draggable title="查看库存快照" width="94%">
    <div class="flex-container">
      <el-form-item label="物料名称">
        <div class="input-wrapper">
          <el-input
            v-model="searchInfo.productName"
            placeholder="请输入物料名称"
            clearable
            @input="handleSearch"
            style="width: 200px"
          >
            <template #prefix>
              <el-icon><search /></el-icon>
            </template>
          </el-input>
        </div>
      </el-form-item>

      <el-form-item label="物料牌号/款式">
        <div class="input-wrapper">
          <el-input
            v-model="searchInfo.brandOrStyle"
            placeholder="请输入物料牌号/款式"
            clearable
            @input="handleSearch"
            style="width: 200px"
          >
            <template #prefix>
              <el-icon><search /></el-icon>
            </template>
          </el-input>
        </div>
      </el-form-item>

      <el-form-item label="物料规格型号">
        <div class="input-wrapper">
          <el-input
            v-model="searchInfo.specification"
            placeholder="请输入物料规格型号"
            clearable
            @input="handleSearch"
            style="width: 200px"
          >
            <template #prefix>
              <el-icon><search /></el-icon>
            </template>
          </el-input>
          <el-button
            type="primary"
            icon="search"
            @click="handleSearch"
            style="height: 100%"
            >查询</el-button
          >
          <el-button icon="refresh" @click="handleReset" style="width: 80px"
            >重置</el-button
          >
        </div>
      </el-form-item>
    </div>
    <el-table
      :data="filteredData"
      border
      style="width: 100%"
      class="custom-table"
    >
      <el-table-column
        prop="productName"
        label="物料名称"
        width="120"
        align="center"
      />
      <el-table-column prop="type" label="类型" align="center">
        <template #default="{ row }">
          {{ typeMap[row.type] || "未知" }}
        </template>
      </el-table-column>
      <el-table-column
        prop="brandOrStyle"
        label="牌号/款式"
        width="120"
        align="center"
      />
      <el-table-column
        prop="specification"
        label="规格型号"
        width="120"
        align="center"
      />
      <el-table-column
        prop="internalBrand"
        label="内部牌号"
        width="120"
        align="center"
      />
      <el-table-column prop="stock" label="库存重量" width="120" align="center">
        <template #default="{ row }">
          {{ row.stock + " kg" }}
        </template>
      </el-table-column>
      <el-table-column prop="piece" label="库存数量" width="120" align="center">
        <template #default="{ row }">
          {{ row.piece + " pcs" }}
        </template>
      </el-table-column>
      <el-table-column
        prop="unitPrice"
        label="单价"
        width="100"
        align="center"
      />
      <el-table-column
        prop="createdAt"
        label="创建时间"
        width="150"
        align="center"
      />
      <el-table-column
        prop="updatedAt"
        label="最后更新时间"
        width="150"
        align="center"
      />
      <el-table-column
        prop="description"
        label="备注"
        width="180"
        align="center"
      />
    </el-table>
    <template #footer>
      <el-button @click="dialogVisible = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { computed, defineComponent, ref, watch } from "vue";
import type { PropType } from "vue";

interface SnapshotItem {
  productName: string;
  type: number;
  brandOrStyle: string;
  specification: string;
  internalBrand: string;
  stock: number;
  quantityBased: boolean;
  unitPrice: number;
  createdAt: string;
  updatedAt: string;
  description: string;
}

const typeMap: Record<number, string> = {
  1: "原料",
  2: "成品",
  3: "其他",
};

export default defineComponent({
  name: "Snapshot",
  props: {
    dialogVisible: {
      type: Boolean,
      required: true,
    },
    snapshotData: {
      type: Array as PropType<SnapshotItem[]>,
      required: true,
    },
  },
  emits: ["update:dialogVisible"],
  setup(props, { emit }) {
    // 搜索条件
    const searchInfo = ref({
      productName: "",
      brandOrStyle: "",
      specification: "",
    });

    // 处理搜索输入
    const handleSearch = () => {
      applyFilters();
    };

    // 处理重置
    const handleReset = () => {
      searchInfo.value = {
        productName: "",
        brandOrStyle: "",
        specification: "",
      };
      applyFilters();
    };

    // 核心过滤逻辑
    const applyFilters = () => {
      return props.snapshotData.filter((item) => {
        // 文本匹配
        const nameMatch =
          item.productName?.includes(searchInfo.value.productName) ?? false;
        const brandMatch =
          item.brandOrStyle?.includes(searchInfo.value.brandOrStyle) ?? false;
        const specMatch =
          item.specification?.includes(searchInfo.value.specification) ?? false;
        return nameMatch && brandMatch && specMatch;
      });
    };

    // 使用计算属性实现响应式过滤
    const filteredData = computed(() => {
      return applyFilters();
    });

    const dialogVisible = ref(props.dialogVisible);

    watch(
      () => props.dialogVisible,
      (val) => {
        dialogVisible.value = val;
      }
    );

    watch(dialogVisible, (val) => {
      emit("update:dialogVisible", val);
    });

    return {
      dialogVisible,
      searchInfo,
      filteredData,
      handleSearch,
      handleReset,
      typeMap,
    };
  },
});
</script>

<style scoped>
.flex-container {
  display: flex;
  flex-flow: row wrap;
  column-gap: 12px;
  align-items: flex-end;
}

.input-wrapper {
  display: flex;
  align-items: center; /* 垂直居中对齐输入框和按钮 */
  gap: 8px; /* 调整输入框与按钮之间的间距 */
}
</style>
